import React, { useState } from 'react';
import './styles.css';

interface PromptFormProps {
  onClose: () => void;
  onSubmit: (formData: any) => void;
}

const PromptForm: React.FC<PromptFormProps> = ({ onClose, onSubmit }) => {
  const [prompt, setPrompt] = useState('I have a {1}, you have a {2}, anybody have {2}');
  const [keywords1, setKeywords1] = useState('dog, cat');
  const [keywords2, setKeywords2] = useState('monkey, panda');
  const [isAI, setIsAI] = useState(true);
  const [picsValue, setPicsValue] = useState(50);
  const [aiValue, setAiValue] = useState(70);

  const handleSubmit = () => {
    onSubmit({
      prompt,
      keywords1,
      keywords2,
      isAI,
      picsValue,
      aiValue
    });
  };

  return (
    <div className="prompt-form-overlay">
      <div className="prompt-form">
        <div className="prompt-form-header">
          <h2>Your Prompt Form</h2>
          <button className="close-button" onClick={onClose}>×</button>
        </div>
        
        <div className="form-group">
          <label>prompt 1</label>
          <textarea 
            value={prompt} 
            onChange={(e) => setPrompt(e.target.value)}
            className="form-control prompt-textarea"
            rows={3}
          />
        </div>
        
        <div className="form-group">
          <label>keywords1</label>
          <div className="keywords-input-group">
            <input 
              type="text" 
              value={keywords1} 
              onChange={(e) => setKeywords1(e.target.value)}
              className="form-control"
            />
            <button className="add-keyword-button" onClick={() => console.log('Add keyword 1')}>+</button>
          </div>
        </div>
        
        <div className="form-group">
          <label>keywords2</label>
          <div className="keywords-input-group">
            <input 
              type="text" 
              value={keywords2} 
              onChange={(e) => setKeywords2(e.target.value)}
              className="form-control"
            />
            <button className="add-keyword-button" onClick={() => console.log('Add keyword 2')}>+</button>
          </div>
        </div>
        
        <div className="form-group checkbox-group">
          <label>isAI</label>
          <input 
            type="checkbox" 
            checked={isAI} 
            onChange={(e) => setIsAI(e.target.checked)}
            className="checkbox"
          />
          <div className="slider-container">
            <input 
              type="range" 
              min="1" 
              max="100" 
              value={aiValue} 
              onChange={(e) => setAiValue(parseInt(e.target.value))}
              className="slider ai-slider"
            />
             <span className="slider-value">{aiValue}</span>
          </div>
        </div>
        
        <div className="form-group checkbox-group">
          <label>pics</label>
          <div className="slider-container">
            <input 
              type="range" 
              min="1" 
              max="1000" 
              value={picsValue} 
              onChange={(e) => setPicsValue(parseInt(e.target.value))}
              className="slider pics-slider"
            />
            <span className="slider-value">{picsValue}</span>
          </div>
        </div>
        
        <div className="form-actions">
          <button className="upload-button" onClick={handleSubmit}>upload</button>
        </div>
      </div>
    </div>
  );
};

export default PromptForm;